<style lang="scss">
	*{
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}
	page{
		background-color: #fff;
	}
	.header{
		width: 100%;
		height: 40rpx;
		background-image: url('/static/similar-shop.webp');
		background-size: 100% 100%;
		margin-top: 4rpx;
	}
	.main{
		.list {
			// background-color: #EFEFEF;
			padding: 14rpx;
			padding-top: 10rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			// display: none;
			// flex-direction: wrap;
			.list-item {
				width: 353rpx;
				// padding-bottom: 600rpx;
				// height: 235px;
				margin-bottom: 10rpx;
				background-color: #fff;
				border-radius: 10rpx;
		
				.i-img {
					width: 100%;
					height: 470rpx;
					
					position: relative;
		
					img {
						width: 100%;
						height: 100%;
						border-top-left-radius: 10rpx;
						border-top-right-radius: 10rpx;
					}
					.look-similar{
						width: 86rpx;
						height: 86rpx;
						background-image: url('/static/i-look.png');
						background-size: 70% 70%;
						background-repeat: no-repeat;
						background-position: center center;
						position: absolute;
						right: 0rpx;
						bottom: 0rpx;
					}
				}
				
		
				.i-bottom {
					width: 100%;
					padding: 10rpx 12rpx 10rpx;
					// box-sizing: border-box;
					.i-text {
						width: 100%;
						height: 68rpx;
						line-height: 34rpx;
						font-size: 24rpx;
						color: #333;
						 /* 核心修正 */
						  overflow: hidden;
						  text-overflow: ellipsis;
						  display: -webkit-box; /* 必须的布局模式 */
						  -webkit-line-clamp: 2; /* 限制显示行数 */
						  -webkit-box-orient: vertical; /* 垂直方向排列 */
						  
						  /* 添加以下属性增强兼容性 */
						  word-break: break-all; /* 长单词换行处理 */
					}
					.i-price-collectNum{
						display: flex;
						justify-content: space-between;
						margin-top: 6rpx;
						.price{
							font-size: 30rpx;
							color: #333;
							// font-weight: bold;
							line-height: 50rpx;
							color: #ff4466;
						}
						.collectNum{
							display: flex;
							justify-content: right;
					
				
							.num{
								line-height: 50rpx;
								font-size: 24rpx;
								color: #f46;
								padding: 0rpx 12rpx;
								background-color: #ffecef;
								border-radius: 40rpx;
							}
							
							
						}
					}
				}
			}
		}
		.no-result{
			width: 100%;
			height: 600rpx;
			background-image: url('/static/i-no-result.png');
			background-repeat: no-repeat;
			background-size: 70% 60%;
			background-position: center 160rpx;
		}
	}
	
</style>
<template>
	<view class="header">
		
	</view>
	<view class="main">
		<view v-if="true" class="list">
				<view class="list-item" v-for="item in 20" :key="index">
					<view class="i-img">
						<img src="/static/i-clothes.webp" alt="" />
						<!-- <view class="look-similar">
							
						</view> -->
					</view>
					<view class="i-bottom">
						<view class="i-text">
							纯棉米奇条纹短袖T恤女2023夏装新款韩版宽松圆领上衣ins
						</view>
						<view class="i-price-collectNum">
							<view class="price">
								¥50
							</view>
							<view class="collectNum">
								<view class="num">
									66人收藏
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		<view v-else class="no-result">
		</view>
	</view>
</template>

<script setup>
	
</script>


